<template>
  <div class="list">
    <div class="bg-top">
      <ListTop :title="headerTitle" :hideTabs="true" />
      <div class="ui-center bg-box">
        <div class="text" v-html="detail.content"></div>
      </div>
    </div>
  </div>
  <UiFooter />
</template>

<script setup>
import { preview } from 'vue3-preview-image';
import ListTop from '@/components/listTop.vue';

const { get, router, baseURL } = inject('global');

let detail = reactive({}),
  articleId = ref(0),
  headerTitleList = ref([
    '凉山彝族儿童字源识字绘本开发研究',
    '彝族小学低年级字源识字教学成效研究',
    '“侗族-他族”混合视觉符号增进初中生中华民族共同体积极联想研究',
    '主旋律歌曲诱发自我参照加工的时间特征：来自ERPS的证据'
  ]);
let headerTitle = computed(() => headerTitleList.value[articleId.value - 167]);
const GetData = () => {
  get('/knowledge/' + articleId.value).then(res => {
    detail = Object.assign(detail, res);
  });
};

watch(
  () => router.currentRoute.value.query.id,
  () => {
    articleId.value = router.currentRoute.value.query.id;
    GetData();
  },
  {
    immediate: true
  }
);
</script>

<style lang="scss" scoped>
.list {
  background: #ede8e2;
  padding: 0 0 100px 0;

  .bg-top {
    @include bgImg('@/assets/list/top-bg_news.png');
    background-size: auto 417px;
    background-position: 0 250px;
  }

  .bg-box {
    box-sizing: border-box;
    overflow: hidden;

    .btn-box {
      padding: 50px 0;

      .item {
        position: relative;
        margin: 0 20px;
        width: 170px;
        height: 70px;
        font-size: 18px;
        color: #7c715f;
        line-height: 26px;
        padding: 22px 0;
        box-sizing: border-box;
        text-align: center;
        cursor: pointer;
        @include bgImg('@/assets/list/btn-detail.png');

        &.on,
        &:hover {
          color: #9c2c29;
          font-weight: bold;
          @include bgImg('@/assets/list/btn-detail_on.png');

          &::after {
            content: '';
            position: absolute;
            top: 80px;
            left: 50%;
            transform: translateX(-50%);
            display: block;
            width: 35px;
            height: 9px;
            @include bgImg('@/assets/list/bg-title-arrow.png');
          }
        }
      }
    }

    .text {
      font-size: 16px;
      color: #3d3d3d;
      line-height: 2;
      word-break: break-all;
      :deep(img) {
        max-width: 100%;
      }
    }

    .title {
      width: 282.97px;
      height: 134px;
      margin: 40px 0;
    }

    &.pic {
      padding-bottom: 10px;

      .title {
        @include bgImg('@/assets/list/bg-title-pic.png');
      }
    }

    &.video {
      .title {
        @include bgImg('@/assets/list/bg-title-video.png');
      }
    }

    .img-box {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 46px 58px;
      cursor: pointer;

      .item {
        background: #fffdf7;
        border: 1px solid #9c2c29;
        box-sizing: border-box;
        padding: 3px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      }

      .text {
        font-size: 18px;
        color: #3d3333;
        line-height: 28.79px;
        text-align: center;
        padding: 16px 0;
      }
    }
  }
}
</style>
